<template>
	<div class="app-mob-calendar">
		<vue-hash-calendar @change="onChange"></vue-hash-calendar>
		<div class="app-mob-calendar__data-container">
			<van-tabs :active="selectItem" class="app-mob-calendar__tabs">
				<van-tab
					v-for="item in model.calendarItems"
					:key="item.name"
					:style="{ color: item.color }"
					:title="item.name"
					:name="item.name"
				>
					<van-list v-if="store.data && store.data[item.itemType]">
						<van-cell
							@click="handleClick(_item)"
							v-for="_item in store.data[item.itemType]"
							:key="_item.title"
							:title="_item.title"
						></van-cell>
					</van-list>
				</van-tab>
			</van-tabs>
		</div>
	</div>
</template>
<script setup lang="ts">
import { dateFormat, IParam } from '@/core';
import { Ref } from 'vue';
import { calendarProps } from './calendar';
const emit = defineEmits<{
	(name: 'clickEvent', args: IParam): void;
	(name: 'getEvents', args: IParam): void;
}>();
const props = defineProps(calendarProps);
const selectItem: Ref<string | number> = ref('');
const handleClick = (item: any) => {
	emit('clickEvent', item);
};

let count = 0;

// 日历组件默认会触发俩次change  跳过事件抛出
const onChange = (date: any) => {
	if (count > 1) {
		emit('getEvents', {
			start: getNowMonthFirst(date),
			end: getNowMonthLast(date),
		});
	}
	count++;
};

/**
 * 获取月第一天
 *
 * @return {*}
 * @memberof CalendarViewController
 */
const getNowMonthFirst = (date: Date) => {
	date.setDate(1);
	return date;
};

/**
 * 获取月最后一天
 *
 * @return {*}
 * @memberof CalendarViewController
 */
const getNowMonthLast = (date: Date) => {
	const endDate = new Date(date.getFullYear(), date.getMonth() + 1, 0);
	return endDate;
};
</script>
